<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity"
                 style="padding-bottom: 0px;">
          <el-form-item label="核销时间">
            <el-date-picker
                style="width:260px"
                v-model="params.entity.verifyMonth"
                type="year"
                format="YYYY"
                value-format="YYYY"
                placeholder="请选择核销时间"/>
          </el-form-item>
          <el-form-item label="区域合伙人">
            <el-input v-model="params.entity.adminName" placeholder="请输入区域合伙人名称"/>
          </el-form-item>
          <!--          <el-form-item label="用户等级">-->
          <!--            <el-input v-model="params.entity.adminLevel"-->
          <!--                      placeholder="请输入用户等级"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="总单子数量">-->
          <!--            <el-input v-model="params.entity.orderCount"-->
          <!--                      placeholder="请输入总单子数量"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="自己的单子">-->
          <!--            <el-input v-model="params.entity.ownerOrderCount"-->
          <!--                      placeholder="请输入自己的单子"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="团队单子">-->
          <!--            <el-input v-model="params.entity.groupOrderCount"-->
          <!--                      placeholder="请输入团队单子"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="总金额">-->
          <!--            <el-input v-model="params.entity.totalPrice"-->
          <!--                      placeholder="请输入总金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="自己单子金额">-->
          <!--            <el-input v-model="params.entity.ownerOrderPrice"-->
          <!--                      placeholder="请输入自己单子金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="团队单子金额">-->
          <!--            <el-input v-model="params.entity.groupOrderPrice"-->
          <!--                      placeholder="请输入团队单子金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="核销总金额">-->
          <!--            <el-input v-model="params.entity.totalVerifPrice"-->
          <!--                      placeholder="请输入核销总金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="自己单子核销金额">-->
          <!--            <el-input v-model="params.entity.totalOwnerVerifPrice"-->
          <!--                      placeholder="请输入自己单子核销金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="团队单子核销金额">-->
          <!--            <el-input v-model="params.entity.totalGroupVerifPrice"-->
          <!--                      placeholder="请输入团队单子核销金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="提现手续费">-->
          <!--            <el-input v-model="params.entity.wechatPer"-->
          <!--                      placeholder="请输入提现手续费"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="提现金额">-->
          <!--            <el-input v-model="params.entity.wechatPrice"-->
          <!--                      placeholder="请输入提现金额"/>-->
          <!--          </el-form-item>-->
          <el-form-item label="审核状态">
            <el-select v-model="params.entity.examineVerify" clearable
                       placeholder="请选择审核状态" style="width:160px">
              <el-option :label="'待审核'" :value=0></el-option>
              <el-option :label="'审核通过'" :value=1></el-option>
              <el-option :label="'审核不通过'" :value=2></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提现状态">
            <el-select v-model="params.entity.tixianFlag" clearable
                       placeholder="请选择提现状态" style="width:160px">
              <el-option :label="'待提现'" :value=0></el-option>
              <el-option :label="'已提现'" :value=1></el-option>
              <el-option :label="'提现失败'" :value=2></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="状态 0-停用 1-启用 2-备用">-->
          <!--            <el-input v-model="params.entity.statusFlag"-->
          <!--                      placeholder="请输入状态 0-停用 1-启用 2-备用"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="是否删除 0-否 1-是">-->
          <!--            <el-input v-model="params.entity.delFlag"-->
          <!--                      placeholder="请输入是否删除 0-否 1-是"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建人">-->
          <!--            <el-input v-model="params.entity.createUser"-->
          <!--                      placeholder="请输入创建人"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建时间">-->
          <!--            <el-input v-model="params.entity.createTime"-->
          <!--                      placeholder="请输入创建时间"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="修改时间">-->
          <!--            <el-input v-model="params.entity.updateTime"-->
          <!--                      placeholder="请输入修改时间"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="备注">-->
          <!--            <el-input v-model="params.entity.remark"-->
          <!--                      placeholder="请输入备注"/>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchData">查询
            </el-button>
            <el-button type="primary" :icon="Plus" @click="verifyYearBtn">年度核销
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <el-button type="primary" :icon="Download" @click="searchExportData">待核销年度导出</el-button>
    <el-table v-loading="loading"
              :data="tableData.list" style="width: 100%" height="500"
              :default-sort="{ prop: 'date', order: 'descending' }"
              @selection-change="handleSelectionChange">
      <!--      <el-table-column fixed type="selection" width="55"/>-->
      <!--      <el-table-column prop="id" label="ID" show-overflow-tooltip/>-->
      <el-table-column prop="verifyYear" label="核销时间(年)" fixed width="100"/>
      <el-table-column prop="adminName" label="用户名称" fixed width="120"/>
      <el-table-column prop="adminLevelName" label="用户等级" width="100"
                       show-overflow-tooltip/>
      <!--      <el-table-column prop="orderCount" label="总单子数量" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="ownerOrderCount" label="自己的单子" show-overflow-tooltip/>-->
      <el-table-column prop="totalPrice" label="总金额" show-overflow-tooltip/>
      <!--      <el-table-column prop="ownerOrderPrice" label="自己单子金额"-->
      <!--                       show-overflow-tooltip/>-->
      <el-table-column prop="totalVerifyPrice" label="核销金额"
                       show-overflow-tooltip/>
      <!--      <el-table-column prop="totalOwnerVerifPrice" label="自己单子核销金额"-->
      <!--                       show-overflow-tooltip/>-->
      <el-table-column prop="wechatPer" label="提现手续费率(%)"
                       show-overflow-tooltip/>
      <el-table-column prop="wechatPrice" label="提现手续费" show-overflow-tooltip/>
      <el-table-column prop="verifyPrice" label="提现金额" show-overflow-tooltip/>
      <el-table-column prop="examineVerifyName" label="审核状态"
                       show-overflow-tooltip/>
      <el-table-column prop="tixianFlagName" label="提现状态"
                       show-overflow-tooltip/>

      <!--      <el-table-column prop="statusFlag" label="状态 0-停用 1-启用 2-备用"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="delFlag" label="是否删除 0-否 1-是"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="createUser" label="创建人"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="createTime" label="创建时间"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="updateTime" label="修改时间"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="remark" label="备注"-->
      <!--                       show-overflow-tooltip/>-->

      <el-table-column fixed="right" label="操作"
                       width="200">
        <!--        <template #header>-->
        <!--          <el-input v-model="params.search" @keyup.enter.native="searchData"-->
        <!--                    placeholder="搜索角色名称/介绍"/>-->
        <!--        </template>-->
        <template #default="scope">
          <el-button link type="danger" v-if="userInfo.userType==0"
                     :icon="Delete" size="small"
                     @click="showDeleteDialog(scope.row.id)">删除
          </el-button>
          <!--          <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>-->
          <el-button link type="primary"
                     :icon="Edit"
                     size="small" @click="openDetail(scope.row)">查看详情
          </el-button>
          <!--          <el-button link type="primary" v-if="scope.row.examineVerify==0"-->
          <!--                     :icon="Edit" size="small"-->
          <!--                     @click="openVerif(scope.row)">核销-->
          <!--          </el-button>-->
          <!--          <el-button link type="primary"-->
          <!--                     v-if="scope.row.examineVerify==1 && scope.row.tixianFlag==0 "-->
          <!--                     :icon="Edit"-->
          <!--                     size="small"-->
          <!--                     @click="openTixian(scope.row)">提现-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="params.current"
                   v-model:page-size="params.size"
                   :page-sizes="[100, 200, 300, 400]"
                   layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>
  </el-card>

  <!-- 新增或者修改页面-->
  <SysAdminVerifyAddOrEdit
      @closeEditDialog="closeEditDialog"
      :addOrEditVisible="addOrEditVisible"
      :ruleForm="ruleForm"
      :addDataType="addDataType"></SysAdminVerifyAddOrEdit>

  <sys-admin-verify-year-oper
      @closeEditDialog="closeOperYearDialog"
      :verifyYearVisible="verifyYearVisible"></sys-admin-verify-year-oper>

  <el-drawer v-model="drawer2" direction="rtl" size="80%" :with-header="false">
    <!--    <template #header>-->
    <!--      <h4>审核信息</h4>-->
    <!--    </template>-->
    <template #default>
      <div>
        <!--        <h3>基本信息</h3>-->
        <el-descriptions
            class="margin-top"
            title="基本信息"
            :column="3"
            :size="size"
            :border="true">
          <el-descriptions-item label="核销时间" :span="3">{{
              ruleForm.verifyMonth
            }}
          </el-descriptions-item>
          <el-descriptions-item label="区域合伙人名称">{{
              ruleForm.adminName
            }}
          </el-descriptions-item>
          <el-descriptions-item label="区域合伙人等级" :span="2">
            {{ ruleForm.adminLevelName }}
          </el-descriptions-item>

          <el-descriptions-item label="订单总金额(￥)">{{
              ruleForm.totalPrice
            }}
          </el-descriptions-item>
          <el-descriptions-item label="核销总金额(￥)" :span="2">
            {{ ruleForm.totalVerifyPrice }}
          </el-descriptions-item>

          <el-descriptions-item label="提现手续费占比">{{ ruleForm.wechatPer || '0' }}
            %
          </el-descriptions-item>
          <el-descriptions-item label="提现手续费(￥)" :span="2">
            {{ ruleForm.wechatPrice || '0' }}
          </el-descriptions-item>

          <el-descriptions-item label="核销状态">{{
              ruleForm.examineVerifyName
            }}
          </el-descriptions-item>
          <el-descriptions-item label="核销备注" :span="2">
            {{ ruleForm.examineVerifyRemark }}
          </el-descriptions-item>

          <el-descriptions-item label="提现状态">
            <span> {{ ruleForm.tixianFlagName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="提现时间" :span="2">
            <span> {{ ruleForm.tixianTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="提现备注" :span="3">
            {{ ruleForm.tixianRemark }}
          </el-descriptions-item>
        </el-descriptions>

        <h4>核销明细</h4>
        <el-tabs v-model="activeName" class="demo-tabs"
                 @tab-click="handleClick">

          <el-tab-pane label="订单(年度)核销" name="first">
            <el-descriptions
                class="margin-top"
                :column="1"
                :size="size"
                :border="true">
              <el-descriptions-item label="订单总金额" :width="120">
                {{ ruleForm.yearOrder.totalPrice }}
              </el-descriptions-item>
              <el-descriptions-item label="核销金额" :width="120">
                {{ ruleForm.yearOrder.totalVerifyPrice }}
              </el-descriptions-item>
            </el-descriptions>

            <el-table v-if="ruleForm.adminLevel !=1" :data="ruleForm.yearOrder.sysAdminVerifyList"
                      style="width: 100%">
<!--              <el-table-column prop="orderId" label="订单ID"-->
<!--                               show-overflow-tooltip/>-->
<!--              <el-table-column prop="poiName" label="商户名称"-->
<!--                               show-overflow-tooltip/>-->
<!--              <el-table-column prop="productName" label="商品名称"-->
<!--                               show-overflow-tooltip/>-->
              <el-table-column prop="verifyMonth" label="月份" show-overflow-tooltip/>
              <el-table-column prop="totalPrice" label="订单价格" show-overflow-tooltip/>
              <el-table-column prop="verifyTime" label="核销时间" show-overflow-tooltip/>
              <!--              <el-table-column prop="totalPrice" label="总金额" show-overflow-tooltip/>-->
              <!--              <el-table-column prop="totalVerifyPrice" label="核销金额" show-overflow-tooltip/>-->
              <!--              <el-table-column prop="verifyTime" label="核销时间" show-overflow-tooltip/>-->
              <!--              <el-table-column prop="remark" label="代理奖励" width="140" show-overflow-tooltip/>-->
            </el-table>

          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="verifyCancel">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox, TabsPaneContext} from 'element-plus'
import {onMounted, computed, reactive, ref, h} from 'vue'
import {Params, Result} from "@/apis/model/common/common.interfaces"
import {
  Delete,
  Edit,
  Search,
  Plus,
  Download
} from '@element-plus/icons-vue'
import SysAdminVerifyAddOrEdit
  from './SysAdminVerifyAddOrEdit.vue'
import {
  deleteSysAdminVerifyById, getSysAdminVerify, sysAdminVerifyExportPage,
  sysAdminVerifyPage, tixianOrders, verifyOrders
} from "@/apis/http/order/SysAdminVerifyHttp";
import {deleteLogById} from "@/apis/http/system/LogHttp";

import {userStore} from "@/store";
import {adminSimpleTree} from "@/apis/http/system/AdminHttp";
import SysAdminVerifyOper
  from "@/views/order/SysAdminVerifyOper.vue";
import {SysAdminVerify} from "@/apis/model/order/SysAdminVerifyModel";
import SysAdminVerifyYearOper from "@/views/order/SysAdminVerifyYearOper.vue";

// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {verifyType: 2} as SysAdminVerify
})

const store = userStore();
const userInfo = store.userInfo;

// const adminTrees = ref([])

const ruleForm = ref<SysAdminVerify>({} as SysAdminVerify)
// AddOrEditVisible
const addOrEditVisible = ref(false)
// 核销
const verifyYearVisible = ref(false);
// table 表数据
const tableData: any = ref({});
// 加载数据
const loading = ref(true)
const addDataType = ref('add');

// 审核
const drawer2 = ref(false)
const verifyEdit = ref(true);
const tixianEdit = ref(true);

const openVerif = (row: any) => {
  ruleForm.value = row;
  if (row.examineVerify == 0) {
    verifyEdit.value = true;
    tixianEdit.value = false;
  } else {
    verifyEdit.value = false;
    tixianEdit.value = false;
  }
  drawer2.value = true
}

const openDetail = async (row: any) => {
  await getSysAdminVerify(row.id).then(res => {
    console.log(';;' + res.data)
    ruleForm.value = res.data;
    verifyEdit.value = false;
    tixianEdit.value = false;
    drawer2.value = true
  })
}

const openTixian = (row: any) => {
  ruleForm.value = row;
  if (row.tixianFlag == 0) {
    verifyEdit.value = false;
    tixianEdit.value = true;
  } else {
    verifyEdit.value = false;
    tixianEdit.value = false;
  }
  drawer2.value = true
}

const verifyCancel = () => {
  drawer2.value = false;
  ruleForm.value = {} as SysAdminVerify;
}

const verifyClick = () => {
  ElMessageBox.confirm(
      '确定审核结果?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        verifyOrders(ruleForm.value).then(res => {
          ElMessage.success('审核成功！');
        })
        drawer2.value = false
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
}


const multipleSelection = ref<SysAdminVerify[]>([])
const handleSelectionChange = (val: SysAdminVerify[]) => {
  multipleSelection.value = val
}

const searchExportData = () => {
  loading.value = true
  ElMessage('正在导出，请稍后......')

  let verifyIds:number[] = [];
  multipleSelection.value.forEach(sh => {verifyIds.push(sh.id)});

  params.entity.ids = verifyIds;
  
  sysAdminVerifyExportPage(params).then((res) => {
    let blob = new Blob([res],
        {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"}
    ); // 为blob设置文件类型，这里以.xlsx为例
    let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
    let a = document.createElement("a");
    a.href = url;
    a.download = '核销数据';
    a.click();
    // 释放这个临时的对象url
    window.URL.revokeObjectURL(url);
    loading.value = false
  })
}

const tixianEditClick = () => {
  ElMessageBox.confirm(
      '确定提现结果?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        tixianOrders(ruleForm.value).then(res => {
          ElMessage.success('审核成功！');
        })
        drawer2.value = false
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
}

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true
  sysAdminVerifyPage(params).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as SysAdminVerify
  addDataType.value = 'add'
}


const verifyYearBtn = () => {

  addDataType.value = 'add'
  verifyYearVisible.value = true
}

//修改弹窗
const editDialog = (row: SysAdminVerify) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

// 关闭修改弹窗
const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

const closeOperYearDialog = (e: any) => {
  verifyYearVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
      '是否删除?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteSysAdminVerifyById(id).then((res: Result) => {
      const code = res.code;
      if (code == 200) {
        ElMessage({
          message: '删除数据成功！',
          type: 'success',
        })
        initList();
      } else {
        ElMessage.error('删除数据失败！');
      }
    })
  }).catch(() => {
    // ElMessage({
    //   type: 'info',
    //   message: 'Delete canceled',
    // })
  })
}

// const initAdminTree = () => {
//   adminSimpleTree().then(res => {
//     adminTrees.value = res.data;
//   })
// }

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

onMounted(() => {
  // initAdminTree();
  initList()
})
</script>

<style>
</style>
